<template>
	<view class="content">
		<view class="contentbox" :style="'height:'+headHeight+'px;'" @click="goBack">
			<view class="container" :style="'height:'+navBarHeight+'px;top:'+imageTop+'px;'">
				<image :src="imageUrl +'left2.png'" mode="widthFix" class="logo"></image>
			</view>
		</view>
		<image :src="imageUrl +'bg.png'" mode="widthFix" class="bg-img"></image>
		<view class="title">保密协议</view>
		<view class="name">一、协议双方</view>
		<view class="detail">
			甲方：宜昌城市停车投资运营有限公司（“夷陵城市停车”小程序运营主体）<br>
			乙方：“夷陵城市停车”小程序车主用户（以下简称“车主”）
		</view>
		<view class="name">二、保密内容</view>
		<view class="detail">
			本协议所指保密信息包括但不限于：<br>
			车主个人信息：姓名、手机号码、身份证号码、车牌号、车辆类型、实时位置信息、支付账户信息、服务咨询及反馈记录等；<br>
			车辆相关信息：车辆品牌、型号、车况、历史停车记录等；<br>
			小程序运营非公开信息：停车收费标准、车位资源实时数据、运营策略、商业合作信息等甲方未公开的信息。
		</view>
		<view class="name">三、甲方的保密义务</view>
		<view class="detail">
			甲方应采取加密传输、访问控制、数据备份、去标识化处理等技术与管理措施，保障保密信息的安全性，防止其被非法获取、篡改、泄露或损坏；<br>
			甲方仅能为提供停车服务（如车位查询、车辆管理、停车缴费、电子发票开具、无感支付等）的必要目的使用保密信息，未经车主明确书面同意，不得向任何第三方披露、转让或用于本协议约定之外的用途；<br>
			甲方若需与第三方服务提供商（如支付机构、地图服务商、技术合作方等）共享保密信息，应与第三方签署严格的保密协议，明确第三方仅能为实现服务目的使用信息，且需满足本协议及《夷陵城市停车小程序隐私保护协议》的要求。
		</view>
		<view class="name">四、乙方的保密义务</view>
		<view class="detail">
			乙方应妥善保管本人在小程序的账号、密码及相关身份验证信息，不得向任何第三方泄露；<br>
			乙方不得非法获取、泄露或滥用其他车主的保密信息，也不得擅自披露小程序运营过程中的非公开信息；<br>
			若乙方发现保密信息存在泄露风险或已被泄露，应立即通知甲方，并配合甲方采取补救措施（如修改账号密码、协助调查等）。
		</view>
		<view class="name">五、保密期限</view>
		<view class="detail">
			本协议的保密期限为永久，自车主首次使用“夷陵城市停车”小程序服务之日起，至保密信息依法进入公有领域时止。
		</view>
		<view class="name">六、违约责任</view>
		<view class="detail">
			若甲方违反本协议约定，泄露或不当使用车主保密信息，应向车主承担赔偿责任，赔偿范围包括车主因此遭受的直接损失（如财产损失）和间接损失（如名誉损害的合理维权费用等）；<br>
			若乙方违反本协议约定，非法披露、使用保密信息，甲方有权采取限制服务功能、暂停账号使用、注销账户等措施，并要求乙方赔偿因此给甲方或其他车主造成的损失；<br>
			因违约行为构成违法犯罪的，协议双方应依法向公安机关、监管部门等有关机关报案，追究其法律责任。
		</view>
		<view class="name">七、其他条款</view>
		<view class="detail">
			本协议未尽事宜，按照《中华人民共和国民法典》《中华人民共和国个人信息保护法》《中华人民共和国网络安全法》等法律法规执行；<br>
			本协议自车主首次使用“夷陵城市停车”小程序服务时生效。
		</view>
		<view class="null"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headHeight: 0,
				navBarHeight: 0,
				imageTop: 0,
				right: 0
			}
		},
		onLoad() {
			// 获取胶囊按钮位置
			// 获取系统信息（主要是状态栏高度）
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			const systemInfo = uni.getSystemInfoSync();

			// 计算顶部总高度：从屏幕顶部到导航栏底部的距离
			const statusBarHeight = systemInfo.statusBarHeight; // 状态栏高度
			const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2; // 导航栏高度
			const totalTopHeight = statusBarHeight + navBarHeight; // 顶部总高度（含状态栏+导航栏）

			console.log('状态栏高度:', statusBarHeight);
			console.log('胶囊按钮信息:', menuButtonInfo);
			console.log('导航栏高度:', navBarHeight);
			console.log('顶部总高度:', totalTopHeight);
			this.headHeight = totalTopHeight
			this.navBarHeight = menuButtonInfo.height
			this.imageTop = menuButtonInfo.top
			this.right = menuButtonInfo.width + 20
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F4FAF7;
	}

	.null {
		width: 750rpx;
		height: 148rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.bg-img {
		width: 750rpx;
		height: 520rpx;
		position: absolute;
		top: 0;
	}

	.contentbox {
		width: 750rpx;
		position: relative;
		z-index: 999;

		.container {
			width: 750rpx;
			position: absolute;
			bottom: 0rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 86rpx;

			.title-names {
				width: 750rpx;
				position: absolute;
				text-align: center;
			}

			.logo {
				margin-left: 18rpx;
				width: 40rpx;
				height: 40rpx;
				position: relative;
				z-index: 9999;
			}

			.seandcode {
				width: 64rpx;
				height: 64rpx;
				position: relative;
				z-index: 9999;
			}
		}
	}

	.title {
		width: 670rpx;
		font-size: 48rpx;
		color: #1C274C;
		position: relative;
		margin-top: 10rpx;
	}

	.name {
		width: 670rpx;
		font-size: 40rpx;
		position: relative;
		margin-top: 40rpx;
	}

	.detail {
		width: 670rpx;
		font-size: 28rpx;
		color: rgba(40, 40, 40, 0.6);
		position: relative;
		margin-top: 20rpx;
	}
</style>